import _ from 'lodash';
import * as React from 'react';
import {toJS} from 'mobx';
import {observer} from 'mobx-react';
import {Table, Row, Col, Button, message, Modal} from 'antd';
import * as moment from 'moment';
import {AdBean} from '../../../../model/ad/Ad';
import {listStore,editStore,checkStore,searchStore,adBindMediaTypeStore} from '../AdStore';
import {expandedRowRender} from './component/ExpandTable';

declare let GLOBAL:any;

class Operation{
    viewApiUrl(id){
        return function(){
            listStore.getAdapiUrlById({id:id}).then(()=>{
                listStore.showApi();
            })
        }
    }
    edit(id){
        return function(){
            editStore.load(id);
        }
    }
    bind(record){
        return function(){
            adBindMediaTypeStore.load(record);
        }
    }
    delete(id){
        return function(e){
            e.preventDefault();
            Modal.confirm({
                title: '删除广告',
                content: '确定删除该广告吗?',
                okText: '确定',
                cancelText: '取消',
                onOk:()=>{
                    listStore.delete(parseInt(id))
                        .then((res)=>{
                            if(res.success){
                                message.success(res.message,3);
                                listStore.refresh(searchStore);
                            }else{
                                message.error(res.message,3);
                            }
                        })
                }
            });   
        }
    }
    check(id){
        return function(){
            checkStore.load(id);
        }
    }
}

const operation = new Operation();

const columns =[{
    title: '标题',
    dataIndex: 'title',
    key:'title',
    render:(text,record) => {
        return <span title={text}>{_.truncate(text,{length:13})}</span>
    }
},{
    title: '起始日期',
    dataIndex: 'beginDate',
    key:'beginDate',
    render:(text,record) =>(
        <span>
            {text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ""}
        </span>
    )
},{
    title: '结束日期',
    dataIndex: 'endDate',
    key:'endDate',
    render:(text,record) =>(
        <span>
            {text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ""}
        </span>
    )
},{
    title: '类型',
    dataIndex: 'mediaType',
    key:'mediaType',
    render:(text, record) =>{
        if(text === 0){
            return <span>图片</span>
        }else if(text === 1){
            return <span>外部图片</span>
        }else if(text === 2){
            return <span>富文本</span>
        }else{
            return <span>纯文本</span>
        }
    }
},{
    title: '预览',
    dataIndex: 'content',
    key:'content',
    render:(text, record) => {
        let mediaType = record.mediaType;
        if(mediaType === 0){
            return (<a href={`${GLOBAL.imageApiURL}/${text}`} target="_blank">图片</a>)
        }else if(mediaType === 1){
            return (<a href={`${text}`} target="_blank">图片</a>)
        }else if(mediaType === 2){
            return (<a href={`${GLOBAL.fileApiURL}/${text}`} target="_blank">网页</a>)
        }else{
            return
        }
    }
},{
    title: '操作',
    key: 'operation',
    render: (text, record) => (
        <span>
            <a href="javascript:void(0);" onClick={operation.viewApiUrl(record.id)}>API</a>
            <span className="ant-divider" />
            <a href="javascript:void(0);" onClick={operation.edit(record.id)}>编辑</a>
            <span className="ant-divider" />
            <a href="javascript:void(0);" onClick={operation.check(record.id)}>查看</a>
            <span className="ant-divider" />
            <a href="javascript:void(0);" onClick={operation.bind(record)}>绑定</a>
            <span className="ant-divider" />
            <a href="javascript:void(0);" onClick={operation.delete(record.id)}>删除</a>
        </span>
    )
}]

@observer
export class ListTable extends React.Component<any, any> {
    componentDidMount(){
        listStore.load();
    }
    handleTableChange(me){
        return function(pagination, filters, sorter){
            let searchParams = searchStore.getValues();

            listStore.load(_.assign(searchParams,{
                pageCount: pagination.pageSize,
                pageIndex: pagination.current
            }));
        }
    }
    onExpand = (expanded, record) =>{
        if(expanded){
            listStore.changeTableData('expandedRows',[record.id])
            listStore.getPositionInfosById({
                id: parseInt(record.id)
            })
        }else{
            listStore.changeTableData('expandedRows',[]);
            listStore.changeTableData('adPositionInfo', []);
        }
    }
    componentWillUnmount(){
        listStore.changeTableData('expandedRows',[]);
    }
    render() {
        return (
            <UserTable style={{paddingLeft:10}}
                    columns={columns} rowKey="id"
                    dataSource={listStore.data}
                    pagination={listStore.pagination}
                    onChange={this.handleTableChange(this)}
                    expandedRowRender = {expandedRowRender(listStore.adPositionInfo)}
                    onExpand = {this.onExpand}
                    expandedRowKeys = {toJS(listStore.expandedRows)}
                />
        )
    }
}

class UserTable extends Table<AdBean<any>> {}
